<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> props传值 验证 默认值 </title>
</head>
<body>
    <div id="root"> 
    </div>    
</body>
</html>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.7.2/prop-types.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel" >
/*
    自定义组件显示一个人信息 需求  
    姓名必须指定
    如果性别没指定  为男 
    如果年龄没指定  默认18岁 
*/

//1 定义组件
    function Person(props){
        // props.XXX.xxx||"我是默认值"  15+版本的默认值 
        // console.log(props) 看对象上面 
        console.log(<Person/>)
        return (
            <ul>
                <p>我是一个无状态组件 外部传递数据props.Xxxx</p>
                <li>姓名：{props.name}</li>
                <li>年龄：{props.age}</li>
                <li>性别：{props.sex}</li>
                <li>多个操作----{props.num}</li>
            </ul>
        )
    }
    //指定属性默认值 
    Person.defaultProps = {
        sex: "男---默认值",
        age: 18
    }
    //指定属性值的类型必要性 props验证 是否符合要求 上线模式取消   
    Person.prototype = {
        name:PropTypes.string.isRequired,   //isRequired 必须传入 
        age:PropTypes.number 
    }

//2 渲染组件标签
    const p1 = {  //人
        name :"东东",
        age:18,
        sex:"女"
    }
    const num = 1111;

// ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex} />,document.getElementById("root")) 
ReactDOM.render(<Person {...p1} num={num}/>,document.getElementById("root"))      //同上代码 

/*
    1  props是react中的重要属性 
       是组件对外的接口 
       使用props就可以从组件的外部向组件的内部进行数据的传递 
    2  也可以完成父组件向子组件的数据传递 
    3  注意不论是函数还是类组件 我们都不能修改自身的props 这个是只读的属性 readOnly 
    4  就收多个时 可以定义对象 使用... 展开就行了

    传递数据----- 给组件标标签添加属性  <Person name={ } age="xxx" ></Person>
    接受数据----- 函数组件通过擦书props接受数据 类组件通过this.props接受数据  


使用propTypes 检测类型 
    1 引入 <scrip src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.7.2/prop-types.js"></scrip
    2 对props中的属性值进行类型限制和 必要性限制    //一个对象
        Person.propTypes={
            name:React.PropTypes.string.isRequired,
            age:React.PropTypes.number.isRequired,
        }

默认值属性  
        Person.defaultProps={
            name:"go"
        }

无状态组件默认值 
        即函数组件名.defaultProps={XX：xx}
        Com.defaultProps={name:"这里时默认值"}

组件类的构造函数
        constructor(props) {   
            super(props);                           
            console.log(props)// 查看所有属性
        }
*/


/*类组件 
class Com extends Component {
    render() { 
        return (  
            <div>
             类组件 {this.props.name}--{this.props.num}
            </div>
        );
    }
}
ReactDOM.render(<Com name="XXXXX" num="xxxx"/>,document.getElementById("root"))      //同上代码 
*/





</script>